<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <div class="mainor_te">
          <el-button @click="add" class="marginLeft10" type="primary"
            >新增客服</el-button
          >
        </div>
        <el-form
          :inline="true"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="客服姓名">
            <el-input
              v-model.trim="name"
              placeholder="请输入姓名"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>

          <div class="clearfix"></div>

          <el-form-item class="marginTop10">
            <el-button class="reset marginLeft10" type="primary" @click="reset"
              >重置</el-button
            >
            <el-button
              type="primary"
              :loading="loading"
              @click="
                pagination.page = 1;
                getData();
              "
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="main_table" style="min-height: 590px">
        <el-table
          v-loading="loading"
          :data="result"
          border
          highlight-current-row
        >
          <el-table-column align="center" label="姓名" prop="name" />
          <el-table-column align="center" label="手机" prop="mobile" />
          <el-table-column align="center" label="客服链接" prop="link" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                style="margin-right: 10px"
                @click="handleEdit(scope.row)"
                type="text"
                size="mini"
                class="handle_btn"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                class="handle_btn del"
                slot="reference"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="pagination.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="pagination.per_page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
              @size-change="sizeChange"
              @current-change="pageChange"
            />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import * as servicesApi from "@/api/user/services";
export default {
  data() {
    return {
      name: "",
      pagination: {
        page: 1,
        per_page: 20,
      },
      total: 0,
      result: [],
      loading: true,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    sizeChange(e) {
      this.pagination.per_page = e;
      this.getData();
    },
    pageChange(e) {
      this.pagination.page = e;
      this.getData();
    },
    add() {
      this.$router.push({
        path: "/user/services/add",
      });
    },
    getData() {
      this.loading = true;
      servicesApi
        .getServicesList({
          ...this.pagination,
          name: this.name,
        })
        .then((res) => {
          this.loading = false;
          this.result = res.data.list.data;
          this.total = res.data.list.total;
        });
    },
    handleEdit(item) {
      localStorage.setItem(
        "servicesItem",
        JSON.stringify({
          id: item.id,
          name: item.name,
          mobile: item.mobile,
          link: item.link
        })
      );
      this.$router.push({
        path: "/user/services/edit",
      });
    },
    handleDelete(id) {
      this.$confirm("确定要删除该客服吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.loading = true;
        servicesApi.deleteServices({ id }).then((res) => {
          if (res.errcode === 0) {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    reset() {
      this.name = "";
      this.getData();
    },
  },
};
</script>

<style lang='scss' scoped>
.handle_btn {
  padding: 0;
  border: 0;
  &.del {
    color: #f78989;
  }
}
</style>